<template>

	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/images/b-1.png"></image>
		<image class="img-b" src="/static/images/b-2.png"></image>
		<!-- 标题 -->
		<view class="avatar">
			<image class="logoimg" src="@/static/images/avatar.png" mode="widthFix"></image>
		</view>
		<view class="t-b">{{ subTitle }}</view>
		<form style="display: 100rpx;">

			<view class="cu-form-group input-item">
				<uni-icons type="person" size="30" color="#0081ff"></uni-icons>
				<input type="number" class="margin-left-lg" v-model="registerForm.userName" style="font-size: 35rpx;"
					placeholder="请输入手机号" />

			</view>
			<view class="cu-form-group input-item">
				<uni-icons type="locked" size="30" color="#0081ff"></uni-icons>
				<input type="text" class="margin-left-lg" v-model="registerForm.password" style="font-size: 35rpx;"
					placeholder="请输入密码" password />
			</view>
			<view class="cu-form-group input-item">
				<uni-icons type="locked" size="30" color="#0081ff"></uni-icons>
				<input type="text" class="margin-left-lg" v-model="passwordAgain" style="font-size: 35rpx;"
					placeholder="请确认密码" password />
			</view>


			<view class="flex flex-direction input-item">

				<button class="cu-btn bg-gradual-green btnBtm" @click="handleRegister">
					<text class="text-xl">注 册</text>
				</button>
				<button class="cu-btn bg-gradual-blue " @click="goBack">
					<text class="text-xl">去 登 录</text>
				</button>

			</view>

		</form>
	</view>
</template>

<script>
	import {
		addUser
	} from '@/api/system/user.js'

	export default {
		data() {
			return {
				title: getApp().globalData.config.appInfo.name,
				subTitle: "欢迎注册~",
				globalConfig: getApp().globalData.config,
				loginForm: {
				  username: "",
				  password: "",
				},
				registerForm: {
					userName: "", //登录名
					nickName: "", //昵称
					phonenumber: "", //手机号码
					password: "", //密码
					deptId: 100, //归属门诊
					isPatient:1,
				},
				passwordAgain: "", //确认密码
				
			}
		},

		methods: {
			handleRegister(){
				if (this.registerForm.userName === "") {
				  this.$modal.msgError("请输入手机号")
				} else if (this.registerForm.password === "") {
				  this.$modal.msgError("请输入密码")
				} else if (this.passwordAgain === "") {
				  this.$modal.msgError("请输入确认密码")
				} 
				if(this.registerForm.password!=this.passwordAgain){
					this.$modal.msgError("密码不一致")
				}
				if(this.registerForm.userName){
					this.checkPhone(this.registerForm.userName)
				}
				if(this.registerForm.password.length&&this.registerForm.password.length<6){
					this.$modal.msg("密码长度应大于等于6位")
					return
				}
				
				if(this.registerForm.userName&&this.registerForm.password&&this.passwordAgain){
					this.registerForm.nickName=this.registerForm.userName
					this.registerForm.phonenumber=this.registerForm.userName
					this.addUser()

				}
			},
			addUser(){
				addUser(this.registerForm).then(res=>{
					if(res.code==200){
						this.$modal.msg("注册成功")
						this.loginForm.username=this.registerForm.userName
						this.loginForm.password=this.registerForm.password
						this.pwdLogin()
						
					}
				})
			},
			checkPhone(phone){
			    var reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
				console.log('reg.test(phone)',reg.test(phone))
			    if(reg.test(phone)==false){
					this.$modal.msg("手机号码格式不正确")
					return
			    }
			},
			goBack() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			// 登录方法
			async handleLogin() {
				if (this.loginForm.username === "") {
					this.$modal.msgError("请输入您的账号")
				} else if (this.loginForm.password === "") {
					this.$modal.msgError("请输入您的密码")
				} else {
					this.$modal.loading("登录中，请耐心等待...")
					this.pwdLogin()
				}
			},
			// 密码登录
			async pwdLogin() {
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {

				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				// this.$tab.reLaunch('/pages/index/index')
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/index/index')
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.input-item {
		// margin: 20px auto;
		margin-top: 40rpx;
		background-color: #F8F7FC;
		height: 45px;
		border-radius: 30px;
	}

	.t-login {
		width: 650rpx;
		margin: 0 auto;
		margin-top: 10%;
		font-size: 28rpx;
		color: #000;
	}

	.t-captcha {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.t-captcha-img {
		margin-left: 16px;
		width: 102px;
		height: 44px;
	}

	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
		z-index: -999;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		z-index: -999;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login .t-b {
		text-align: center;
		font-size: 45rpx;
		color: #282C35;
		padding: 80rpx 0 20rpx 0;
		// font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: center;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 60rpx 0;
	}

	.avatar {
		// margin-left: 25%;
		// margin-right: 40%;
		// margin-top: 10%;
		display: flex;
		/*盒子模型*/
		flex-direction: row;
		/*横向*/
		justify-content: space-around;
		/*主轴居中*/
		align-items: center;
		/*纵轴居中*/

	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50px;
		// background: #000;
		// border: 1px solid #fff;
		border-width: 5px 5px 5px 5px;
		box-shadow: 1px 1px 5px #333;
		-webkit-box-shadow: 1px 1px 5px #333;
		-moz-box-shadow: 1px 1px 5px #333;
		background-color: #1494dc;
	}

	.login-form-content {
		border-radius: 10px;
		// background: #000;
		// border: 1px solid #fff;
		border-width: 1px 1px 1px 1px;
		box-shadow: 1px 1px 1px #aaa;
		-webkit-box-shadow: 1px 1px 5px #aaa;
		-moz-box-shadow: 1px 1px 5px #aaa;
		// background-color: #fff;
	}

	.btnBtm {
		margin-bottom: 40rpx;
	}
</style>